$unit:0.5px;
.wrapper{
  background: #3D6FF0;
  padding: 0 0 30*$unit;
  box-sizing: border-box;
  min-height: 100vh;
}
.top{
  height: 212*$unit;
  background-image: url();
  background-size: 20*$unit;
  display: flex;
  justify-content: center;
  align-items: center;
  &-img{
    height: 86*$unit;
    display: block;
  }
}
.qaboxs{
  background: #ffffff;
  flex: 1;
  position: relative;
  margin: 0 20*$unit;
  padding: 0 20*$unit;
}
.dots{
  display: flex;
  align-items: center;
  height: 56*$unit;
  background: #2859D7;
  margin: 0 20*$unit;
  .dot{
    width: 28*$unit;
    height: 28*$unit;
    border-radius: 50%;
    margin-left: 20*$unit;
  }
}
$colors:#FF427B,#86C6F6,#FFD503;
// .loop(@index) when(@index <= length(@colors)){
// 	.dot-@{index}{
// 		background: extract(@colors, @index);
// 	}
// 	.loop(@index + 1);
// }
// .loop(0);

// 开始 @each 循环遍历数组
 // $c 作为循环变量，代表了数组的元素，不是索引~！！！
 @each $c in  $colors{
  $i:index( $colors,$c);        // 获取 $c 在数组中的索引，并赋值给 $i 赋值用冒号，不是等号~！ 
  .dot-#{$i}{                   // 经典的地方来了，SCSS 循环是从 1 开始，不是 0 哦~
      background: $c;           // 背景色
  }
}
